<script setup lang="ts">
import { onMounted, computed } from 'vue'
import Mask from './components/mask.vue'
import MyImage from './components/myimage.vue'
import { useStore } from 'vuex'
import dayjs from 'dayjs'
const store = useStore()
const allTypes = JSON.parse(window.sessionStorage.getItem("allTypes")!)

onMounted(() => {
    loadMapScript(); // 加载百度地图资源
});

const init = () => {
    let geoc = new BMap.Geocoder(); //获取用户的地址解析。
    let native = new BMap.LocalCity(); //此类用于获取用户所在的城市位置信息
    let lat: number
    let lng: number
    let cityname: string;
    native.get(function (r: any) {
        lng = r.center.lng; //经度
        lat = r.center.lat; //纬度
        cityname = r.name; //城市名
        geoc.getLocation(r.center,
            function () {
                // store.commit('location/saveLocation', { cityname, lng, lat })
                window.sessionStorage.setItem("location", JSON.stringify({ cityname, lng, lat }))
                console.log(cityname, lng, lat)
            });
    });

};

const loadMapScript = () => {
    // 此处在所需页面引入资源就是，不用再public/index.html中引入
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.className = "loadmap"; // 给script一个类名
    script.src = "https://api.map.baidu.com/getscript?v=3.0&ak=qRklLgLjLfmDSrPCQDzQV431KyRx2XAY";
    script.onload = () => {
        init();
    };
    let loadmap = document.getElementsByClassName("loadmap");
    if (loadmap) {
        // 每次append script之前判断一下，避免重复添加script资源标签
        for (var i = 0; i < loadmap.length; i++) {
            document.body.removeChild(loadmap[i]);
        }
    }
    document.body.appendChild(script);
};


const isShowMask: any = computed(() => {
    return store.getters.isShowMask ? true : false
})
</script>

<template>
    <router-view></router-view>
    <Mask v-model="isShowMask">
        <div class="search-container flex-start-start">
            <div class="search-movie-list">
                <el-divider content-position="left">电影列表</el-divider>
                <div class="choose-item space-around" v-for="item in store.getters.searchList">
                    <div class="choose-item-pic" style="margin-right: 30px;">
                        <MyImage :url="item?item!.movieCover:''" :fs='20' fc='#00B7C3' :data="item?item!:null"
                            :date="dayjs().format('YYYY-MM-DD')"></MyImage>
                    </div>
                    <div class="choose-item-desc">
                            <div><b>电影名称：</b>{{item?.movieName?item?.movieName:'未知'}}</div>
                            <div><b>电影介绍：</b>{{item?.movieDesc?item?.movieDesc:'未知'}}</div>
                            <div><b>电影类型：</b> {{allTypes&&item?allTypes[item!.movieTypeId - 1].type :'未知'}}
                            </div>
                            <div><b>电影时长：</b> {{item?.movieView?item?.movieDuring:'未知'}}</div>
                            <div><b>评分人数：</b> {{item?.movieScoreNum?item?.movieScoreNum:'未知'}}</div>
                            <div><b>电影浏览量：</b> {{item?.movieView?item?.movieView:'未知'}}</div>
                            <div><b>电影评分：</b>
                                <el-rate show-score v-model="item.movieScore" disabled score-template="{value} 分" />
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </Mask>
</template>

<style scoped lang="less">
.choose-item {
    width: 100%;
    height: 250px;
    margin-bottom: 30px;

    .choose-item-pic {
        flex: 0 0 30%;
        border-radius: 20px;
        overflow: hidden;
        background-color: rgba(255, 255, 255, 0.6);
        height: 100%;
    }

    .choose-item-desc {
        display: flex;
        flex: 0 1 70%;
        border-radius: 20px;
        background-color: rgba(255, 255, 255, 0.6);
        height: 100%;
        padding: 20px;
        justify-content: space-between;
        align-items: flex-start;
        flex-direction: column;
    }
}

.search-container {
    width: 100%;
    height: 100%;
    flex-direction: column;
}

.search-movie-list {
    width: 100%;
}

.search-cinema-list {
    width: 100%;
}

/deep/ .el-divider__text {
    background-color: transparent;
    font-size: 22px;
    font-weight: bold;
}
</style>